<template>
	<div class="bookListComponent flex flex-wrap justify-around">
		<div class="bookListComponentList flex-direction flex align-center " v-for="(im, ix) in 17">
			<img src="../assets/image/backimg.jpg" alt="" class="bookListComponentListImg">
			<div class="bookListComponentListName flex align-center justify-between">
				<div class="bookListComponentListNameLeft">书名</div>
				<div class="bookListComponentListNameRight">作者</div>
			</div>
		</div>
		<div v-for="i in 100" style="width: 260px;"></div>
	</div>
</template>

<script>
	export default{
		name: 'bookListComponent'
	}
</script>

<style lang="scss" scoped="scoped">
	.bookListComponent{
		.bookListComponentList{
			width: 260px;
			height: 260px;
			background: rgba($color: #000000, $alpha: .3);
			border: 1px solid #CCCCCC;
			margin-bottom: 20px;
			.bookListComponentListImg{
				width: 90%;
				height: 160px;
				margin-top: 10px;
			}
			.bookListComponentListName{
				width: 90%;
				margin-top: 30px;
				font-size: 26px;
				.bookListComponentListNameRight{
					font-size: 18px;
				}
			}
		}
	}
</style>
